<template>
  <div v-if="hide">
    <el-row v-for="(row, type) in startList" :key="type">
      <el-col :span="2" v-for="(item, index) in row" :key="index">
        <el-button
          @click="golist(type, item, index, showC(type, item, index))"
          :type="showC(type, item, index)"
          >{{ item }}</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      prolist: [
        {
          color: "亮黑色",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "耳机套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "电视果套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "耳机套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "银粉金",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "银粉金",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "耳机套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "亮黑色",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "极光色",
          version: "电视果套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "翡翠冷",
          version: "耳机套装版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "分期用",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "宝石蓝",
          version: "分期用",
          nc: "6+64",
          PRICE: 236000
        },
        {
          color: "银粉金",
          version: "标准版",
          nc: "6+128",
          PRICE: 236000
        },
        {
          color: "银粉金",
          version: "标准版",
          nc: "6+64",
          PRICE: 236000
        }
      ],
      hide: false, //控制重新渲染
      selectlist: {
        // 选择列表
      },
      startList: {
        //初次渲染属性列表
      },
      filterList: {
        // 过滤商品列表
      },
      queList: {
        //确认渲染属性列表
      }
    };
  },
  beforeMount() {
    let altObj = JSON.parse(JSON.stringify(this.prolist[0]));
    delete altObj.PRICE;
    // delete altObj.// PURCHASE_QUANTITY;
    let alt = Object.keys(altObj);

    for (let i of alt) {
      this.startList[i] = [...new Set(this.prolist.map(item => item[i]))];
      this.selectlist[i] = 0;
    }
    this.changeData();
  },
  methods: {
    changeData() {
      this.hide = false;
      let alt = Object.keys(this.selectlist);
      for (let i of alt) {
        this.filterList[i] = this.prolist.filter(
          val => val[i] === this.startList[i][this.selectlist[i]]
        );
      }

      for (let i of alt) {
        let objGetOnly = JSON.parse(JSON.stringify(this.filterList));
        delete objGetOnly[i];
        console.log(i, objGetOnly);

        let rst = Object.values(objGetOnly);
        this.queList[i] =
          rst.length < 2
            ? [...new Set(rst[0].map(v => v[i]))]
            : rst.reduce((a, b) => [
                ...new Set(
                  a.map(v => v[i]).filter(k => b.map(v => v[i]).includes(k))
                )
              ]);

        console.log(rst);
      }
      this.$nextTick(() => {
        this.hide = true;
      });
    },
    showC(type, item, index) {
      return index === this.selectlist[type]
        ? "primary"
        : this.queList[type].includes(item)
        ? "success"
        : "info";
    },
    golist(type, item, index, event) {
      switch (event) {
        case "primary":
          this.$message.info("已选择");
          break;
        case "success":
          this.selectlist[type] = index;
          this.changeData();
          break;
        case "info":
          this.$message.error("请选择可选项");
          break;

        default:
          break;
      }
    }
  }
};
</script>
